﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Add Hover Style Facebook LikeBox With Button Near To Page ScrollBar</title>
<style>

body { font-family:arial; font-size:14px; background-image:url('http://2.bp.blogspot.com/_jM8-wHc3NKY/TTn1fs8EP7I/AAAAAAAAASg/iemyCUBOEmw/s1600/bgpattern.png'); background-repeat:repeat; }
#page-wrap { text-align:center; width:950px; margin-left:auto; margin-right:auto; margin-top:20px; }
#header { height:60px; margin-top:20px; margin-bottom:20px; width:100%; text-align:center; 
	/*background-color: #F5F4F2; border:2px ridge #FFFFFF;*/
 }
#content { background-color:white; width:900px; padding:20px; text-align:left; margin-top:10px; border:2px solid gray;  }
h1 { padding:20px 10px 20px 10px; color:FF9500; margin:0; text-shadow: #FFFFFF 2px 2px 2px; }
.large { font-size:22px; }
.orange { color:orange; }
.italic { font-style:italic }
.textmiddle {vertical-align:middle;} 
.padout { padding-left:25px; padding-right:25px; }
.rounded-corners {
     -moz-border-radius: 40px;
    -webkit-border-radius: 40px;
    -khtml-border-radius: 40px;
    border-radius: 40px;
}
h2 { font-size:22px; color:#ed6a34; padding:10px 10px 10px 20px; 
	text-shadow: white 1px 1px 1px;
	margin:0;
  }
  p { margin-left:20px; font-size:14px; font-family:Georgia,Serif; }
.scrolldown { padding-left:20px; color:#EDECE8; font-size:40px; font-weight:bold; vertical-align:middle;
	text-shadow: #6374AB 2px 2px 2px;
 }
 #footer {  height:40px; margin-bottom:20px; width:100%; text-align:center; 
 margin-top:20px;
 text-align:center; 
 vertical-align:middle;
 } 
  #footer p { font-size:12px; color:#F8FACF; font-weight:bold; }
  #footer a {text-decoration:none; color:#F8FACF; font-weight:bold;}
  
.backtoblog { width:950px; padding:10px; margin-top:20px; margin-bottom:20px; font-size:18px; text-align:left; }
a img{ text-decoration:none; border:none; }

.clearing { clear:both; }

.singledemo { height:140px; width:960px; margin-bottom:20px; border:2px ridge #FFFFFF;
	/*background-image:url('http://2.bp.blogspot.com/_jM8-wHc3NKY/TTn1fs8EP7I/AAAAAAAAASg/iemyCUBOEmw/s1600/bgpattern.png'); background-repeat:repeat;*/
	background-color:#F5F4F2; text-align:center;
}
.demo-item-picture img { opacity:0.8; }
.demo-item-picture img:hover { opacity:1.0; }

#social-icons { float:right; position:relative; right:5px; top:5px;  }
.social-icon { opacity:0.8; }
.social-icon:hover { opacity:1.0; }
#slogan { color:F8FACF; font-weight:bold; font-size:16px; margin:0px 0px 0px 0px; }
/* 
http://2.bp.blogspot.com/_jM8-wHc3NKY/TTn1fs8EP7I/AAAAAAAAASg/iemyCUBOEmw/s1600/bgpattern.png
http://2.bp.blogspot.com/_jM8-wHc3NKY/TTn1fs8EP7I/AAAAAAAAASg/iemyCUBOEmw/s1600/bgpattern.png
*/
.demo-item-picture { float:left; width:400px; height:140px;  }
.demo-item-picture  img { width:400px; height:140px; }
.demo-item-links { display:inline-block; width:550px; height:140px; }
.demo-item-links h2 { background-color:#EBE9E6; }
.demo-item-links img { width:135px; height:30px; }

</style>

</head>

<div id="page-wrap">

<div id="header">

<a href="http://24work.blogspot.com/"><img src='http://3.bp.blogspot.com/-CslwrDLAePk/TyVMoLAFHKI/AAAAAAAAALA/E969QNv0RjE/s1600/cooltext634522957.png'></a>



	<div id="social-icons">

	<a href="http://www.facebook.com/pages/Blogspot-tutorial/220888831260608?v=wall"><img class="social-icon" id="rss" src="http://4.bp.blogspot.com/-idaCURIZMzc/Tw2Ds-p7gPI/AAAAAAAAAOM/IITMm5oTfAw/s1600/facebook.png" /></a>

	<a href="http://twitter.com/rohul786"><img class="social-icon" id="rss" src="http://3.bp.blogspot.com/-VYD7_rZErtE/Tw2Dby9qAYI/AAAAAAAAAOE/hN_i0euIvLg/s1600/twitter.png" /></a>

	<a href="http://24work.blogspot.com/feeds/posts/default"><img class="social-icon" id="rss" src="http://4.bp.blogspot.com/-bbKY-UrjTMM/Tw2EQCYdigI/AAAAAAAAAOU/Cd1cjM7kfaQ/s1600/rss.png" /></a>

</div>

	



<div id="content">



<h2>Add Hover Style Facebook LikeBox With Button Near To Page ScrollBar Demo :</h2>



<div style="border: 2px dotted green; padding: 20px;">

Watch the live demo Add Hover Style Facebook LikeBox With Button Near To Page ScrollBar



</div>

</div>



<br/>



<div id="content" class="rounded-corners">



	









<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<style type="text/css">
img, a { border: 0; } 
#on { visibility: visible; } 
#off { visibility: hidden; } 
#facebook_div { width: 196px; 
height: 340px; 
overflow: hidden; } 
#facebook_right { 
z-index: 10005; 
border: 2px solid #3c95d9; 
background-color: #fff; 
width: 196px; 
height: 353px; 
position: fixed; 
right: -200px; } 
#facebook_right img { 
position: absolute; 
top: -2px; 
left: -35px; } 
#facebook_right iframe { 
border: 0px solid #3c95d9; 
overflow: hidden; 
position: static; 
height: 360px; 
left: -2px; 
top: -3px; } 
#facebook_left { 
z-index: 10005; 
border: 2px solid #3c95d9; 
background-color: #fff; 
width: 196px; 
height: 353px; 
position: fixed; 
left: -200px; } 
#facebook_left img { 
position: absolute; 
top: -2px; 
right: -35px; } 
#facebook_left iframe { 
border: 0px solid #3c95d9; 
overflow: hidden; 
position: static; 
height: 360px; 
right: -2px; 
top: -3px; } 
</style> 
<script type="text/javascript"> 
jQuery(document).ready(function () { 
jQuery("#facebook_right").hover(function () { 
jQuery(this)
.stop(true, false)
.animate({ right: 0 }, 500); }, function () { 
jQuery("#facebook_right")
.stop(true, false).animate({ right: -200 }, 500); }); 
 });
</script> <br /> <div id="on"> <a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="My Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="My Blogger Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="All Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="All Blogger Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Techtunes"><img src="https://bitly.com/24workpng1" alt="Techtunes" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><div id="facebook_right" style="top: 10%;"> 
<div id="facebook_div"> 
<img alt="" src="http://3.bp.blogspot.com/-wQUpmiGwynE/UNHJaesfqeI/AAAAAAAAItg/JQlnTuoFRnQ/s1600/NBTfacebook_right.png" /> 
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FBlogspot-tutorial%2F220888831260608&amp;
width=200&amp;
height=346&amp;
colorscheme=light&amp;
show_faces=true&amp;
border_color&amp;
stream=false&amp;
header=false" style="border: none; 
height: 346px; 
overflow: hidden; 
width: 200px;">
</iframe> 
</div> 
</div></div>


<br />
<br />

<div class="backtoblog">

<div style="text-align: center;">

<a href="http://24work.blogspot.com/" target="_blank" title="Blogspot tutorial"><span style="font-size: x-large;">Back To Blog</span></a></div>



</body>

</html>